class Index {

    constructor() {
        //倒计时实现
        this.countDown()
        //自动播放
        this.autoPlay()
        //发送请求 获取数据 用户名 购物车数量
        this.getData()
        this.shopNum()
        this.bindEve()


    }
    lastIndex = 0;
    nowIndex = 0;
    //绑定事件方法
    bindEve() {
        //获取ol下的元素 并绑定点击事件
        this.$('.circle li').forEach((element, key) => {
            element.addEventListener("click", this.olClick.bind(this, key))
        });
        //左右按钮绑定点击事件
        this.$('.arrow-r').addEventListener("click", this.nextImg)
        this.$('.arrow-l').addEventListener("click", this.previouImg)
        //鼠标移入暂停 移出继续
        this.$(".t-img").addEventListener('mouseover', this.stopImg)
        this.$(".t-img").addEventListener('mouseout', this.goImg)
        //搜索框输入事件  失去焦点
        this.$('#text').addEventListener('input', this.keyWord)
        this.$('#text').addEventListener('blur', this.hidden)
        //点击关闭广告

        this.$('.close-btn').addEventListener('click', this.closeAd)
        //退出点击事件
        this.$('.fr .f10').addEventListener('click', this.exitLogin)
    }
    //关闭广告
    closeAd = () => {
        this.$('.mobile img').style.display = "none"
        this.$('.close-btn').style.display = "none"
    }
    //关键词
    keyWord = () => {
        //让ul显示

        this.$('.user').style.display = "block"

        //创建script标签
        let script = document.createElement('script');
        script.src = "https://ds.suning.com/ds/his/new/-" + this.$('#text').value + "-0-1_0-autoComplateCallback_184b31b125a59d8c382d3d8382d23350.jsonp?callback=Index.autoComplateCallback_184b31b125a59d8c382d3d8382d23350&_=1662864833533";
        // 2-1 追加到head中

        document.head.appendChild(script);
        script.remove();

    }
    //失去焦点隐藏
    hidden = () => {
        // console.log(this);
        this.$('.user').style.display = "none"
    }
    /********实现轮播图************/
    //点击ol下的小圆圈
    olClick(key) {
        // console.log(key);
        this.lastIndex = this.nowIndex;

        this.nowIndex = key;

        this.selectImg();
    }
    //右按钮实现
    nextImg = () => {

        // 当前图片索引+1
        this.nowIndex++;

        // 判断图片是否超出最大索引

        if (this.nowIndex == this.$('.circle li').length) {

            this.nowIndex = 0;
        }
        // console.log(this);
        this.selectImg();
    }
    //左按钮实现
    previouImg = () => {

        // 当前图片索引+1
        // _this.lastIndex = _this.nowIndex;
        // console.log(_this.nowIndex, "1111");
        this.nowIndex--;
        // console.log(_this.nowIndex, "2222");
        // console.log(index);
        // 判断图片是否小于0
        if (this.nowIndex == -1) {
            this.nowIndex = this.$('.circle li').length - 1;
        }

        this.selectImg();
    }
    //自动播放
    time = ""
    autoPlay = () => {
        this.time = setInterval(() => {
            this.nextImg()
        }, 2000)
    }
    //移入暂停
    stopImg = () => {
        clearInterval(this.time)

    }
    //移出继续
    goImg = () => {
        this.autoPlay()
    }
    //排他思想 当前有类名 其他的没有
    selectImg = () => {
        //     // 取消原来有ac类的图片
        this.$('.t-img .aac').className = ""
        this.$('.circle .ac').className = ""
        //     // 设置最新出来的图片有ac类
        this.$('.t-img li')[this.nowIndex].className = 'aac';
        this.$('.circle li')[this.nowIndex].className = 'ac';
    }


    //发送请求 获取数据 修改名字
    async getData() {
        // console.log(this);
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.defaults.headers.common['Authorization'] = localStorage.getItem("token")
        let res = await axios.get("http://localhost:8888/users/info?id=" + localStorage.getItem("user_id"))

        let { data, status } = res
        // console.log(data.info.nickname, this);
        if (status == 200 && data.code == 1) {
            this.$('.nav').firstElementChild.firstElementChild.innerHTML = "您好，尊敬的" + data.info.nickname
            this.$('.login-t span').innerHTML = "您好，尊敬的" + data.info.nickname
            this.$('.fr .f10').innerHTML = "退出"
            // location.reload()
        }

    }

    //退出登录
    exitLogin = () => {
        let val = this.$('.fr .f10').innerHTML

        if (val == "退出") {
            this.$('.fr .f10').href = "#"

            axios.get(`http://localhost:8888/users/logout?id=` + localStorage.getItem("user_id"))
                .then(res => {
                    // console.log(res);
                    let { data: { code } } = res
                    //判断注销是否成功
                    if (code == 1) {
                        val = "免费注册"
                        this.$('.fr .f10').href = "register.html"
                        //清空localStorage   token 和 user id
                        localStorage.removeItem('token')
                        localStorage.removeItem('user_id')
                    }
                    location.reload()
                }).catch(res => {
                    console.log(res);
                })
        }
    }

    //显示购物车商品数量
    async shopNum() {
        let res = await axios.get("http://localhost:8888/cart/list/?id=" + localStorage.getItem('user_id'))
        let { data, status } = res
        // console.log(data);
        let num = 0
        if (status == 200 && data.code == 1) {

            data.cart.map(v => {
                // console.log(v);
                return num += v.cart_number
            })

            this.$('.count').innerHTML = num
        }
    }



    //倒计时的实现
    countDown() {

        this.time = setInterval(() => {

            let date = new Date()
            //获取月 日 时
            let Nhour = date.getHours()
            let month = date.getMonth() + 1
            let day = date.getDate()
            //实时的毫秒数
            let nowTime = date.getTime()

            // 给场次设置时间
            Nhour = Nhour % 2 == 0 ? Nhour + 2 : Nhour + 1
            this.$('.session').innerHTML = Nhour + ":00"
            let preTime = +new Date(`2022.${month}.${day} ${Nhour}:0:0`);

            //获取秒数
            let res = (preTime - nowTime) / 1000;

            //时
            let hour = parseInt(res / 60 / 60 % 24)
            hour = hour < 10 ? "0" + hour : hour

            //分
            let min = parseInt(res / 60 % 60);
            min = min < 10 ? "0" + min : min
            // console.log(min);
            //秒
            let sec = parseInt(res % 60);
            sec = sec < 10 ? "0" + sec : sec;
            //设置
            this.$('.hour').innerHTML = hour
            this.$('.minute').innerHTML = min
            this.$('.second').innerHTML = sec

        }, 1000)




    }
    //封装个获取节点对象的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res
    }
}

function autoComplateCallback_184b31b125a59d8c382d3d8382d23350(data) {
    let html = ""
    let { words } = data
    // console.log(words);
    words.splice(0, 10).forEach(v => html += `<li>${v.keyword}</li>`)
    // console.log(html);
    document.querySelector('.user').innerHTML = html
}

new Index